@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentListVm3

<wt:quote>
  <p>TreeContainer is mainly used for left tree structure, right navigation to other elements </p>
</wt:quote>

<wt:fieldset field-set-style="Simple" title="TreeContainer">
 </wt:fieldset>
 <p>The common properties of treecontainer are:</p>
  <table lay-filter="parse-table-demo">
    <thead>
      <tr>
        <th lay-data="{field:'username', width:200}">properties</th>
        <th lay-data="{field:'required', width:100}">Requird</th>
        <th lay-data="{field:'joinTime', width:600}">Despription</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Id</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>Control ID, generated by default according to the bound field name</td>
      </tr>
      <tr>
        <td>Field</td>
        <td><i class="layui-icon layui-icon-ok"></i></td>
        <td>Binding field</td>
      </tr>
      <tr>
        <td>ShowLine</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>If to display the connection, Default=true</td>
      </tr>
      <tr>
        <td>IdField</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>If a grid is nested, the tree will pass the ID of the click node to the bound IdField, such as searcher.xxxid</td>
      </tr>
      <tr>
        <td>LevelField</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>If a grid is nested, the tree will pass the click node level (the shape from 0) to the bound level field, such as searcher.level</td>
      </tr>
      <tr>
        <td>AutoLoadUrl</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>Default page on the right</td>
      </tr>
      <tr>
        <td>Name</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>Control name, generated by default according to the bound field name</td>
      </tr>
      <tr>
        <td>Items</td>
        <td><i class="layui-icon layui-icon-ok"></i></td>
        <td>List data source&lt;type :List<TreeSelectListItem>&gt;</td>
      </tr>
      <tr>
        <td>ClickFunc</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>JS method name triggered by Click the node; The framework will pass a parameter containing the node information to the JS method. For example, if your own JS method is  func OnClick(data){...}, you can set click-func=‘OnClick’ on the control</td>
      </tr>
    </tbody>
  </table>

    <wt:quote>
    <p>TreeContainer control must be bound to the Items field. Set the data source through the items property. Items need to be bound to a List&lt;TreeSelectListItem&gt;</p>
    <p>TreeSelectListItem is an auxiliary class provided by the framework, with properties such as ID, Text, Url, Children, etc</p>
    <p>Inheriting the model of ITreeData interface, it is convenient to call the functions provided by the framework to generate the data format required by TreeContainer,</p>
    <p>For example, DC. Set(). Gettreeselectlistitems (loginuserinfo. Dataprivileges, null, x = > x.depname) can read the database directly and generate a List&lt;TreeSelectListItem&gt;</p>
  </wt:quote>


<wt:quote>
  <p>Treecontainer has three main usages</p>
</wt:quote>

<wt:fieldset field-set-style="Simple" title="Simple navigation">
  <p>clicking the tree structure element, the page will be displayed on the right side according to the URL attribute in the bound List&lt;TreeSelectListItem&gt;</p>
  <p>As follow:</p>
  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="Effect" />
      <wt:tabheader title="Code" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="UrlTree" height="300" />
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//Just one line, WTM will read the URL from the UrlTree field bound by items
&lt;wt:treecontainer items="UrlTree" /&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>

</wt:fieldset>

<wt:fieldset field-set-style="Simple" title="dynamic control">
  <p>In this mode, no page will appear on the right side, but other controls will be written directly inside wt:treecontainer, and then controlled dynamically with JS</p>
  <p>as follows:</p>
  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="Effect" />
      <wt:tabheader title="Code" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="AllDeps" click-func="SetText" height="300">
          <wt:textbox field="Test" />
        </wt:treecontainer>
        <script>
          function SetText(data) {
            $('#StudentListVm3_Test').val(data.data.title);
          }
        </script>
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//run custom js by setting click-func
&lt;wt:treecontainer items="AllDeps" click-func="SetText"&gt;
  //Controls written inside treecontainer will appear in the right side
  //it can be any taghelper or html
  &lt;wt:textbox field="Test" /&gt;
&lt;/wt:treecontainer&gt;
//the js function defined by click-func, it will be called when tree is clicked
&lt;script&gt;
  function SetText(data) {
    $('#VMName_Test').val(data.data.title);
  }
&lt;/script&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>
</wt:fieldset>

<wt:fieldset field-set-style="Simple" title="Binding list">
  <p>This is a special case of the previous pattern. If the framework detects that you have used wt:grid in wt:treecontainer,</p>
  <p>When you click the left tree, the selected node ID will be passed to the internal grid as the search criteria</p>

  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="Effect" />
      <wt:tabheader title="Code" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="AllDeps" id-field="Searcher.DepId" height="500">
          <wt:searchpanel vm="@Model" reset-btn="true">
            <wt:row items-per-row="ItemsPerRowEnum.Three">
              <wt:textbox field="Searcher.LoginName" />
              <wt:textbox field="Searcher.Name" />
            </wt:row>
          </wt:searchpanel>
          <wt:grid vm="@Model" />
        </wt:treecontainer>
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//By setting id-field="Searcher.DepId"，the value we choosed in the tree will be passed to Search.DepId, and then refresh the grid inside
&lt;wt:treecontainer items="AllDeps" id-field="Searcher.DepId" height="500"&gt;
  //write a SearchPanel and a Grid inside TreeContainer
  &lt;wt:searchpanel vm="@@Model" reset-btn="true"&gt;
    &lt;wt:row items-per-row="ItemsPerRowEnum.Three"&gt;
      &lt;wt:textbox field="Searcher.LoginName" /&gt;
      &lt;wt:textbox field="Searcher.Name" /&gt;
    &lt;/wt:row&gt;
  &lt;/wt:searchpanel&gt;
  &lt;wt:grid vm="@@Model" /&gt;
&lt;/wt:treecontainer&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>

</wt:fieldset>

<script>
    layui.use('code',function(){layui.code({ about: false })})
  layui.table.init('parse-table-demo', {
        limit: 100, page: false
  });
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
